<!--
 * @Descripttion: 邀约分享页
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-09-08 13:40:01
 * @LastEditors: GW
 * @LastEditTime: 2021-11-09 09:42:37
-->

<template>
    <div class="share-wrapper">
        <div class="content">
            <template v-for="(item,index) in data">
                <div class="view-header" v-if="data[0].onOff && index == 0" :style="{'background':data[0].background}">
                    <div class="view-img-upload">
                        <img v-if="header.logo" class="view-logo" :src="header.logo" :data-index="0">
                        <!-- <a-icon v-else class="view-logo" type="picture" :data-index="0" /> -->
                    </div>
                    <span class="view-title" :style="{'color':data[0].bgColor}" :data-index="0">{{header.title}}</span>
                    <span class="view-remark" :data-index="0">{{header.remarks}}</span>
                </div>
                <component v-if="index > 0" :is="handleType(item.type)" :data="item"></component>
            </template>
            <div class="btn">
                <a-button class="btn-submit" type="primary" @click="submitForm" size="large">
                    提交
                </a-button>
            </div>
            <div class="show-footer">
                <div>免费制作表单网址：<span class="site">www.sibanyun.com</span></div>
                <small>(客户管理
                    <a-icon type="arrow-right" /> 市场活动
                    <a-icon type="arrow-right" /> 制作表单)
                </small>
            </div>

        </div>
    </div>
</template>
<script>
import { mapState } from "vuex";
import Input from "./components/view/input";
import Select from "./components/view/select";
import Radio from "./components/view/radio";
import Texts from "./components/view/text";
import Checkbox from "./components/view/checkbox";
import Date from "./components/view/date";
import Link from "./components/view/link";
import Textarea from "./components/view/textarea";
import Numbers from "./components/view/number"
import Picture from "./components/view/picture"
import Video from "./components/view/video"
import Divider from "./components/view/divider"
import Phone from "./components/view/phone"
import Inputfrom from "./components/view/inputfrom"
import Sex from "./components/view/sex"
import Birthday from "./components/view/birthday"
import Invitedate from "./components/view/invitedate"
import { getFilesDetail, saveFilesData } from '@/api/activity/activity'

export default {
    components: {
        Input, Select, Radio, Texts, Checkbox, Date, Link, Textarea, Numbers, Picture, Video, Inputfrom, Sex, Birthday, Phone, Divider, Invitedate
    },
    data () {
        return {
            labelCol: { span: 6 },
            wrapperCol: { span: 16 },
            form: {
                name: '',
                region: undefined,
                date1: undefined,
                delivery: false,
                type: [],
                resource: '',
                desc: '',
            },
            formId: null,//表单id
            shareUserId: null,//分享人id
            shareUserName: null,//分享人名字
            data: []
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
        header () {
            return this.data[0];
        },
    },
    created () {
        this.formId = this.$route.query.id;
        this.shareUserId = this.$route.query.shareUserId;
        // this.shareUserName = this.$route.query.shareUserName;
        this.getDetails();

    },
    methods: {
        getDetails () {
            //获取表单设计
            getFilesDetail({ id: this.formId }).then(res => {
                if (res.code === 200) {
                    let first = res.data;
                    let fields = res.data.fields;
                    let viewArray = [
                        {
                            type: "header",//显示的组件
                            title: first.title,//页面标题
                            logo: first.logo,//表单logo
                            remarks: first.remarks,//描述
                            data: {},//数据
                            onOff: true,//是否显示
                            background: first.bgImg,
                            prompt: '提交成功',//用户提交后显示的文字
                            style: {},//样式
                            maxLength: 10,//输入框最多输入字符
                            text: '',//文本类型需要
                            status: 1,//状态(1:正常 2:拖动中)
                            value: null,//用户输入的值
                            bgColor: first.bgColor,//标题颜色
                        }];
                    fields.forEach(item => {
                        let val = JSON.parse(item.val);
                        console.log(val);
                        let obj = {
                            isSms: first.isSms,        //是否发送短信验证码 0否1是
                            type: item.type,    // 组件类型
                            title: item.name,        //标题
                            onFill: item.onFill,       //是否必填
                            onOff: item.onOff,        //是否显示
                            style: item.style,          //样式（描述样式）
                            maxLength: item.length,    //输入框字符长度
                            text: val.text ? val.text : null,           //文本内容,超链接,图片显示文字
                            scope: val.scope,           //数字范围
                            data: val.data,           //基本数据
                            src: val.src,             //图片地址
                            href: val.href,            //图片连接 
                            onPadding: val.onPadding,       //是否有边距
                            borderWidth: val.borderWidth,    //分割线粗细
                            borderColor: val.borderColor,    //分割线颜色
                            timeDate: `${first.beginDate} ~ ${first.endDate}`,         //活动日期
                        }
                        viewArray.push(obj);
                    });
                    this.data = viewArray;
                    document.title = this.data[0].title;
                } else {
                    // this.$message.warning(res.message)
                }
            })
        },
        handleType (type) {
            let t = null;
            let componentsAttay = ['name', 'company', 'email', 'job', 'qq', 'address'];//公用一个编辑组件
            if (type == 'text') {
                t = 'Texts';//Text是关键字，为组件名时不会显示，有问题
            } else if (type == 'number') {
                t = 'Numbers';//Number是关键字，为组件名时不会显示，有问题
            } else if (componentsAttay.includes(type)) {
                t = 'Inputfrom';
            } else {
                t = type.charAt(0).toUpperCase() + type.slice(1);
            }
            return t;
        },
        submitForm () {
            let submitData = {
                formId: this.formId,//表单id
                address: null,//地址
                crmName: null,//客户 / 公司名称
                defineFields: null,//自定义字段
                email: null,//邮箱
                name: null,//姓名
                phone: null,//手机号
                phoneNumber: null,//座机号
                qq: null,
                smsCode: null,//短信验证码
                defineFields: [],//自定义字段
            };
            let data = this.data.filter(d => d.onEdit);
            for (let i = 0; i < data.length; i++) {
                if (data[i].onFill == 1) {
                    //必填
                    if (!data[i].value) {
                        this.$message.warning(`${data[i].title}必须填写`);
                        return;
                    }
                }
                if (data[i].type == 'name') {
                    //姓名
                    submitData.name = data[i].value;
                }
                if (data[i].type == 'phone') {
                    //手机号
                    submitData.phone = data[i].value;
                    //短信验证码
                    submitData.smsCode = data[i].smsCode;
                }
                if (data[i].type == 'email') {
                    //邮箱
                    submitData.email = data[i].value;
                }
                if (data[i].type == 'company') {
                    //公司
                    submitData.crmName = data[i].value;
                }
                if (data[i].type == 'job') {
                    //职位
                    submitData.job = data[i].value;
                }
                if (data[i].type == 'address') {
                    //职位
                    submitData.address = data[i].value;
                }
                if (data[i].type == 'qq') {
                    //职位
                    submitData.qq = data[i].value;
                }
                //自定义字段
                if (data[i].type == 'input' || data[i].type == 'textarea' || data[i].type == 'number' || data[i].type == 'date') {
                    let obj = {
                        title: data[i].title,
                        type: data[i].type,
                        value: data[i].value
                    }
                    submitData.defineFields.push(obj)
                }
                if (data[i].type == 'select' || data[i].type == 'radio') {
                    let val = '';
                    let d = data[i].data;
                    d.forEach(item => {
                        if (item.key == data[i].value) {
                            val = item.label
                        }
                    });
                    let obj = {
                        title: data[i].title,
                        type: data[i].type,
                        value: val
                    }
                    submitData.defineFields.push(obj)
                }

                if (data[i].type == 'checkbox') {
                    let val = [];
                    let d = data[i].data;
                    let v = data[i].value;
                    d.forEach(item => {
                        v.forEach(iv => {
                            if (item.key == iv) {
                                val.push(item.label)
                            }
                        });
                    });
                    let obj = {
                        title: data[i].title,
                        type: data[i].type,
                        value: val
                    }
                    submitData.defineFields.push(obj)
                }
            }
            console.log(this.data);
            console.log(data);
            // return;
            submitData.defineFields = JSON.stringify(submitData.defineFields);
            submitData.shareUserId = this.shareUserId;
            // submitData.shareUserName = this.shareUserName;
            if (!this.shareUserId) {
                this.$message.warning('分享地址有误，请重新获取分享地址！');
                return;
            }
            if (submitData.phone && submitData.phone != null) {
                let reg = /^1[3456789]\d{9}$/;
                if (!reg.test(submitData.phone)) {
                    this.$message.warning('手机号码输入有误！');
                    return;
                }
            }
            if (submitData.email && submitData.email != null) {
                let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                if (!reg.test(submitData.email)) {
                    this.$message.warning('邮箱输入有误！');
                    return;
                }
            }
            saveFilesData(submitData).then(res => {
                if (res.code === 200) {
                    this.$success({
                        title: '提示',
                        okText: '确认',
                        // JSX support
                        content: (
                            <div>
                                <p>{this.data[0].prompt}</p>
                            </div>
                        ),
                        onOk () {
                            window.close();
                        }
                    });
                }
            })
        }
    },
}
</script>

<style lang="less">
    body {
        min-width: 100% !important;
        width: 100% !important;
    }
    .share-wrapper {
        width: 100%;
        margin: 0 auto;
        // padding: 10px;
        .view-header {
            position: relative;
            width: 100%;
            z-index: 6;
            height: 100px;
            display: table;
            // background: url('~@/assets/mobile-top.png') no-repeat;
            background-size: contain;
            border: 1px solid #fff;
            .view-title {
                position: absolute;
                top: 16px;
                right: 6px;
                font-size: 16px;
                font-weight: bold;
                text-align: left;
                z-index: 5;
                width: 68%;
                letter-spacing: 1px;
            }
            .view-remark {
                position: absolute;
                top: 39px;
                right: 6px;
                font-size: 12px;
                text-align: left;
                z-index: 5;
                color: #888;
                width: 68%;
                letter-spacing: 1px;
            }
            .view-img-upload {
                position: absolute;
                display: table-cell;

                left: 8px;
                top: 10px;
                width: 80px;
                height: 80px;
                overflow: hidden;
                font-size: 56px;
                z-index: 5;
                img {
                    vertical-align: super;
                }
                .view-logo {
                    width: 100%;
                    max-height: 80px;
                    border-style: none;
                }
            }

            // .view-logo {
            //     position: absolute;
            //     left: 26px;
            //     top: 10px;
            //     width: 60px;
            //     height: 60px;
            //     overflow: hidden;
            //     font-size: 56px;
            //     z-index: 5;
            // }
        }
        .content {
            padding-bottom: 10px;
        }
        .btn {
            margin-top: 20px;
            text-align: center;
            width: 100%;
            .btn-submit {
                width: 50%;
            }
        }
        .show-footer {
            margin-top: 20px;
            height: 48px;
            padding-top: 4px;
            color: #666;
            font-size: 14px;
            background: #eee;
            text-align: center;
            .site {
                text-decoration: underline;
            }
        }
    }
</style>
